<template>
	<view class="profit-wrap page-bg">
		
		<view class="mine-list">
			<view class="mine-item">
				<image class="mine-item__avatar" :src="info.avatar | avatar" mode=""></image>
				<view class="mine-item__info">
					<view class="mine-item__title">{{info.nickName}}</view>
					<view class="mine-item__phone">{{info.userPhone | phonePartOf}}</view>
					<view class="mine-item__time">注册时间:{{info.creationTime | formatTime}}</view>
				</view>
				<view class="mine-item__profit theme">共{{info.teamSize}}个成员</view>
			</view>
		</view>
		
		<view class="line-info-wrap">
			<view class="line-info">
				<view class="line-info__title">一级成员</view>
				<view class="line-info__con ">{{info.directNum}}个</view>
			</view>
			<view class="line-info">
				<view class="line-info__title">二级成员</view>
				<view class="line-info__con ">{{info.indirect}}个</view>
			</view>
		</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import { api } from '../../utils/api.js'
	export default {
		data() {
			return{
				info: {},
				id: ''
			}
		},
		onLoad(options) {
			this.id = options.id
			this.getInfo()
		},
		methods:{
			getInfo() {
				api.getTeamByUserId({ id: this.id },(res) => {
					 this.info = res
				}) 
			}
		}
	}
</script>

<style scoped lang="less">
	@import url('../../app.less');
	.profit-wrap{
		.content-20;
	}

	.scroll-menu{
		background-color: @f;
		.br;
		.menu-item{
			width: 33.33%;
		}
	}
	
	.none-wrap{
		position: relative;
		.none{
			position: unset;
		}
	}
	
	.mine-list{
		.mine-item{
			background-color: @f;
			.br;
			.content-20;
			margin-bottom: 20rpx;
			.flex-base;
		}
		.mine-item__avatar{
			width: 100rpx;
			height: 100rpx;
			border-radius: 100%;
		}
		.mine-item__info{
			padding: 0 20rpx;
			box-sizing: border-box;
			flex-grow: 2;
		}
		.mine-item__title{
			.f30;
			.one{
				background: @theme-color;
				text-align: center;
				line-height: 30rpx;
				color: @f;
				font-size: 10rpx;
				border-radius: 10rpx 0 10rpx 0;
				padding: 0 10rpx;
				margin-left: 10rpx;
			}
			.two{
				background-color: @font-orange-color;
			}
		}
		.mine-item__time{
			.f24;
			color: @font-dark-color;
			margin-top: 10rpx;
		}
		.mine-item__profit{
			.f28;
			width: 150rpx;
			.text-overflow;
			text-align: right;
			
		}
		.link{
			    justify-content: flex-end;
		}
	}
</style>
